<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日志系统测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
        }
        .test-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        .test-button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        .test-button:hover {
            background-color: #45a049;
        }
        .status {
            margin: 10px 0;
            padding: 10px;
            border-radius: 4px;
        }
        .success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .log-output {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 10px;
            margin: 10px 0;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            white-space: pre-wrap;
            max-height: 300px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <h1>WechatSync 日志系统测试</h1>
    
    <div class="test-section">
        <h3>基本日志测试</h3>
        <button class="test-button" onclick="testBasicLogging()">测试基本日志</button>
        <button class="test-button" onclick="testErrorLogging()">测试错误日志</button>
        <button class="test-button" onclick="testWarningLogging()">测试警告日志</button>
        <div id="basic-status" class="status" style="display:none;"></div>
    </div>

    <div class="test-section">
        <h3>Chrome API 测试</h3>
        <button class="test-button" onclick="testChromeAPIs()">测试Chrome API可用性</button>
        <div id="api-status" class="status" style="display:none;"></div>
    </div>

    <div class="test-section">
        <h3>消息传递测试</h3>
        <button class="test-button" onclick="testMessagePassing()">测试消息传递</button>
        <div id="message-status" class="status" style="display:none;"></div>
    </div>

    <div class="test-section">
        <h3>日志检索</h3>
        <button class="test-button" onclick="retrieveLogs()">检索日志</button>
        <button class="test-button" onclick="clearLogs()">清除日志</button>
        <div id="log-output" class="log-output" style="display:none;"></div>
    </div>

    <script>
        // 测试基本日志记录
        function testBasicLogging() {
            const status = document.getElementById('basic-status');
            try {
                console.log('测试基本日志记录 - 时间:', new Date().toLocaleString());
                status.className = 'status success';
                status.textContent = '基本日志测试完成，请查看浏览器控制台';
                status.style.display = 'block';
            } catch (error) {
                status.className = 'status error';
                status.textContent = '基本日志测试失败: ' + error.message;
                status.style.display = 'block';
            }
        }

        // 测试错误日志记录
        function testErrorLogging() {
            const status = document.getElementById('basic-status');
            try {
                console.error('测试错误日志记录 - 时间:', new Date().toLocaleString());
                status.className = 'status success';
                status.textContent = '错误日志测试完成，请查看浏览器控制台';
                status.style.display = 'block';
            } catch (error) {
                status.className = 'status error';
                status.textContent = '错误日志测试失败: ' + error.message;
                status.style.display = 'block';
            }
        }

        // 测试警告日志记录
        function testWarningLogging() {
            const status = document.getElementById('basic-status');
            try {
                console.warn('测试警告日志记录 - 时间:', new Date().toLocaleString());
                status.className = 'status success';
                status.textContent = '警告日志测试完成，请查看浏览器控制台';
                status.style.display = 'block';
            } catch (error) {
                status.className = 'status error';
                status.textContent = '警告日志测试失败: ' + error.message;
                status.style.display = 'block';
            }
        }

        // 测试Chrome API可用性
        function testChromeAPIs() {
            const status = document.getElementById('api-status');
            let results = [];
            
            try {
                // 测试基本Chrome对象
                results.push('chrome对象: ' + (typeof chrome !== 'undefined' ? '可用' : '不可用'));
                results.push('chrome.runtime: ' + (chrome.runtime ? '可用' : '不可用'));
                results.push('chrome.storage: ' + (chrome.storage ? '可用' : '不可用'));
                results.push('chrome.tabs: ' + (chrome.tabs ? '可用' : '不可用'));
                
                // 测试runtime API
                if (chrome.runtime) {
                    results.push('chrome.runtime.getManifest: ' + (chrome.runtime.getManifest ? '可用' : '不可用'));
                    results.push('chrome.runtime.sendMessage: ' + (chrome.runtime.sendMessage ? '可用' : '不可用'));
                    results.push('chrome.runtime.onMessage: ' + (chrome.runtime.onMessage ? '可用' : '不可用'));
                }
                
                // 测试storage API
                if (chrome.storage) {
                    results.push('chrome.storage.local: ' + (chrome.storage.local ? '可用' : '不可用'));
                }
                
                status.className = 'status success';
                status.textContent = 'Chrome API测试完成：' + results.join('；');
                status.style.display = 'block';
                
                console.log('Chrome API测试结果:', results);
            } catch (error) {
                status.className = 'status error';
                status.textContent = 'Chrome API测试失败: ' + error.message;
                status.style.display = 'block';
            }
        }

        // 测试消息传递
        function testMessagePassing() {
            const status = document.getElementById('message-status');
            
            try {
                if (!chrome.runtime || !chrome.runtime.sendMessage) {
                    throw new Error('chrome.runtime.sendMessage 不可用');
                }
                
                chrome.runtime.sendMessage({ action: 'ping' }, (response) => {
                    if (chrome.runtime.lastError) {
                        status.className = 'status error';
                        status.textContent = '消息传递失败: ' + chrome.runtime.lastError.message;
                        status.style.display = 'block';
                        console.error('消息传递错误:', chrome.runtime.lastError);
                    } else {
                        status.className = 'status success';
                        status.textContent = '消息传递成功: ' + JSON.stringify(response);
                        status.style.display = 'block';
                        console.log('消息传递响应:', response);
                    }
                });
            } catch (error) {
                status.className = 'status error';
                status.textContent = '消息传递测试失败: ' + error.message;
                status.style.display = 'block';
            }
        }

        // 检索日志
        function retrieveLogs() {
            const output = document.getElementById('log-output');
            const status = document.getElementById('basic-status');
            
            try {
                if (!chrome.storage || !chrome.storage.local) {
                    throw new Error('chrome.storage.local 不可用');
                }
                
                chrome.storage.local.get(['debug_logs'], (result) => {
                    const logs = result.debug_logs || [];
                    output.textContent = '找到 ' + logs.length + ' 条日志:\n\n';
                    
                    if (logs.length > 0) {
                        logs.forEach((log, index) => {
                            output.textContent += `[${index + 1}] ${log.timestamp} [${log.level}] ${log.message}\n`;
                            if (log.details) {
                                output.textContent += `    详情: ${JSON.stringify(log.details)}\n`;
                            }
                        });
                    } else {
                        output.textContent += '暂无日志记录';
                    }
                    
                    output.style.display = 'block';
                    status.className = 'status success';
                    status.textContent = '日志检索完成';
                    status.style.display = 'block';
                });
            } catch (error) {
                output.style.display = 'none';
                status.className = 'status error';
                status.textContent = '日志检索失败: ' + error.message;
                status.style.display = 'block';
            }
        }

        // 清除日志
        function clearLogs() {
            const status = document.getElementById('basic-status');
            
            try {
                if (!chrome.storage || !chrome.storage.local) {
                    throw new Error('chrome.storage.local 不可用');
                }
                
                if (confirm('确定要清除所有日志吗？')) {
                    chrome.storage.local.remove(['debug_logs'], () => {
                        status.className = 'status success';
                        status.textContent = '日志已清除';
                        status.style.display = 'block';
                        document.getElementById('log-output').style.display = 'none';
                    });
                }
            } catch (error) {
                status.className = 'status error';
                status.textContent = '日志清除失败: ' + error.message;
                status.style.display = 'block';
            }
        }

        // 页面加载完成后自动运行一些测试
        window.addEventListener('load', () => {
            console.log('日志测试页面已加载');
            testChromeAPIs();
        });
    </script>
</body>
</html>